import { reactive } from 'vue';
import type { ShowSearchType } from 'ant-design-vue/es/cascader';
import { 
    LockOutlined,
    DownCircleOutlined,
    SisternodeOutlined,
    PartitionOutlined,
    CheckSquareOutlined,
    StarOutlined,
    ClockCircleOutlined,
    FieldTimeOutlined,
    ProfileOutlined,
    CloudUploadOutlined,
} from '@ant-design/icons-vue';
import { getRanges } from '@/utils/date';

/**
 * 表单属性【右面板】
 **/
export const formConfig = reactive({
    name: 'andForm',
    formModel: 'model',
    layout: 'vertical',
    labelWidth: 300, //标签宽度
    labelAlign: 'right',
    labelCol: {
        span: 24,
        offset: 0,
    },
    wrapperCol: {
        span: 24,
        offset: 0,
    },
    gutter: 12,
    disabled: false,
    baseColProps: { xs: 24, sm: 24, md: 24, lg: 24, xl: 24, xxl: 24 },
    colon: false,
    schemas: [],
    showResetButton: false,
    showSubmitButton: false,
});

/**
 * 业务使用组件 【左面板】
 **/
export const baseComponents = [
    {
        // 组件自定义配置
        _config_: {
            label: '单行文本',
            field: undefined,
            colProps: { span: 24 },
            component: 'Input',
            defaultValue: undefined,
            required: true, //是否必填（默认必填）
            rules: [], // 校验规则（可多条）
        },
        // 组件属性
        _props_: {
            placeholder: '请输入',
            style: { width: '100%' },
            allowClear: true,
            maxlength: undefined,
            disabled: false,
            size: 'default',
            prefix: '',
            suffix: '',
        },
        // 其他显示配置
        _other_: {
            tagIcon: 'inputIcon',
            isSvg: true,
            formItemId: 1,
            isShowList: true,
        },
    },
    {
        // 组件自定义配置
        _config_: {
            label: '多行文本',
            field: undefined,
            colProps: { span: 24 },
            component: 'InputTextArea',
            defaultValue: undefined,
            required: true, //是否必填（默认必填）
            rules: [], // 校验规则（可多条）
        },
        // 组件属性
        _props_: {
            placeholder: '请输入内容...',
            style: { width: '100%' },
            allowClear: true,
            disabled: false,
            autoSize: {
                minRows: 4,
                maxRows: 6,
            },
            showCount: false,
            maxlength: undefined,
        },
        // 其他显示配置
        _other_: {
            tagIcon: 'textareaIcon',
            isSvg: true,
            formItemId: 2,
            isShowList: true,
        },
    },
    {
        // 组件自定义配置
        _config_: {
            label: '密码',
            field: undefined,
            colProps: { span: 24 },
            component: 'InputPassword',
            defaultValue: undefined,
            required: true, //是否必填（默认必填）
            rules: [], // 校验规则（可多条）
        },
        // 组件属性
        _props_: {
            placeholder: '请输入',
            style: { width: '100%' },
            allowClear: true,
            maxlength: undefined,
            disabled: false,
            size: 'default',
            prefix: '',
            suffix: '',
        },
        // 其他显示配置
        _other_: {
            tagIcon: LockOutlined,
            formItemId: 3,
            isShowList: true,
        },
    },
    {
        // 组件自定义配置
        _config_: {
            label: '数字框',
            field: undefined,
            colProps: { span: 24 },
            component: 'InputNumber',
            defaultValue: undefined,
            required: true, //是否必填（默认必填）
            rules: [{ type: 'number' }], // 校验规则（可多条）
        },
        // 组件属性
        _props_: {
            placeholder: '请输入',
            style: { width: '100%' },
            allowClear: true,
            disabled: false,
            controls: true,
            size: 'default',
            min: 0,
            max: undefined,
            step: 1,
            precision: 0,
            prefix: '',
        },
        // 其他显示配置
        _other_: {
            tagIcon: 'numberIcon',
            formItemId: 4,
            isSvg: true,
            isShowList: true,
        },
    },
    {
        // 组件自定义配置
        _config_: {
            label: '富文本',
            field: undefined,
            colProps: { span: 24 },
            component: 'WangEditor',
            required: true, //是否必填（默认必填）
            rules: [{ type: 'string' }], // 校验规则（可多条）
        },
        // 组件属性
        _props_: {
            style: { width: '100%' },
            height: 450,
        },
        // 其他显示配置
        _other_: {
            tagIcon: ProfileOutlined,
            formItemId: 5,
            isShowList: false,
        },
    },
];

// 联级搜索事件
export const cascaderFilter: ShowSearchType['filter'] = (inputValue, path) => {
    return path.some(option => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);
};

//默认快捷取日期范围
export const defaultRanges = ()=>{
    return getRanges(['今天','本周','上一周','本月','近30天','过去7天','过去30天']);
};

/**
 * 选择型组件 【左面板】
 **/
export const chooseComponents = [
    {
        // 组件自定义配置
        _config_: {
            label: '下拉选择',
            field: undefined,
            colProps: { span: 24 },
            component: 'Select',
            defaultValue: undefined,
            required: true, //是否必填（默认必填）
            rules: [{ type: 'number', trigger: 'change' }], // 校验规则（可多条）
        },
        // 组件属性
        _props_: {
            placeholder: '请输入',
            style: { width: '100%' },
            allowClear: true,
            disabled: false,
            showSearch: false,
            mode: 'default',
            size: 'default',
            options: [{
                label: '选项一',
                value: 1,
            }, {
                label: '选项二',
                value: 2,
            }],
            filterOption: (input: string, option: any) => {
                return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
            },
        },
        // 其他显示配置
        _other_: {
            tagIcon: DownCircleOutlined,
            formItemId: 6,
            isShowList: true,
        },
    },
    {
        // 组件自定义配置
        _config_: {
            label: '联级选择',
            field: undefined,
            colProps: { span: 24 },
            component: 'Cascader',
            defaultValue: undefined,
            required: true, //是否必填（默认必填）
            rules: [{ type: 'array', trigger: 'blur' }], // 校验规则（可多条）
        },
        // 组件属性
        _props_: {
            placeholder: '请输入',
            style: { width: '100%' },
            allowClear: true,
            disabled: false,
            showSearch: { filter: cascaderFilter }, // 搜索事件

            changeOnSelect: false, //是否允许只选中父级选项,
            multiple: false, // 是否多选
            expandTrigger: 'hover', // 展开下级菜单方式
            size: 'default',
            options: [{
                label: '选项一',
                value: 1,
                children: [{
                    value: 11,
                    label: '选项1-1',
                }],
            }, {
                label: '选项二',
                value: 2,
                children: [{
                    value: 21,
                    label: '选项2-1',
                }],
            }],
        },
        // 其他显示配置
        _other_: {
            tagIcon: SisternodeOutlined,
            formItemId: 7,
            ruleType: 'number',
            ifShowSearch: true,
            isShowList: false,
        },
    },
    {
        // 组件自定义配置
        _config_: {
            label: '树选择',
            field: undefined,
            colProps: { span: 24 },
            component: 'TreeSelect',
            defaultValue: undefined,
            required: true, //是否必填（默认必填）
            rules: [{ type: 'number', trigger: 'blur' }], // 校验规则（可多条）
        },
        // 组件属性
        _props_: {
            placeholder: '请输入',
            style: { width: '100%' },
            allowClear: true,
            disabled: false,
            dropdownMatchSelectWidth: true, // 下拉菜单和选择器同宽
            showSearch: true, // 在下拉中显示搜索框(仅在单选模式下生效)
            treeLine: false, //是否展示线条样式
            treeDefaultExpandAll: true, // 默认展开所有树节点
            treeCheckStrictly: false, // checkable 状态下节点选择完全受控（父子节点选中状态不再关联）
            multiple: false, // 支持多选
            treeCheckable: false, // 显示多选框
            treeNodeFilterProp: 'label', // 输入项过滤对应的 treeNode 属性
            searchValue: '', // 搜索值
            size: 'default',
            treeData: [{
                label: '选项一',
                value: 1,
                children: [{
                    value: 11,
                    label: '选项1-1',
                }],
            }, {
                label: '选项二',
                value: 2,
                children: [{
                    value: 21,
                    label: '选项2-1',
                }],
            }],
        },
        // 其他显示配置
        _other_: {
            tagIcon: PartitionOutlined,
            formItemId: 8,
            ruleType: 'number',
            isShowList: false,
        },
    },
    {
        // 组件自定义配置
        _config_: {
            label: '单选框',
            field: undefined,
            colProps: { span: 24 },
            defaultValue: undefined,
            component: 'RadioGroup',
            required: true, //是否必填（默认必填）
            rules: [{ type: 'number' }], // 校验规则（可多条）
        },
        // 组件属性
        _props_: {
            placeholder: '请输入',
            style: { width: '100%' },
            allowClear: true,
            disabled: false,
            optionType: 'default', // 选项展示类型
            buttonStyle: 'outline', // 选项按钮风格
            size: 'default',
            options: [{
                label: '选项一',
                value: 1,
            }, {
                label: '选项二',
                value: 2,
            }],
        },
        // 其他显示配置
        _other_: {
            tagIcon: 'radioIcon',
            isSvg: true,
            formItemId: 9,
            ruleType: 'number',
            isShowList: true,
        },
    },
    {
        // 组件自定义配置
        _config_: {
            label: '多选框',
            field: undefined,
            colProps: { span: 24 },
            defaultValue: undefined,
            component: 'CheckboxGroup',
            required: true, //是否必填（默认必填）
            rules: [{ type: 'array' }], // 校验规则（可多条）
        },
        // 组件属性
        _props_: {
            placeholder: '请输入',
            style: { width: '100%' },
            disabled: false,
            size: 'default',
            options: [{
                label: '选项一',
                value: 1,
            }, {
                label: '选项二',
                value: 2,
            }],
        },
        // 其他显示配置
        _other_: {
            tagIcon: CheckSquareOutlined,
            formItemId: 10,
            ruleType: 'number',
            isShowList: true,
        },
    },
    {
        // 组件自定义配置
        _config_: {
            label: '开关',
            field: undefined,
            colProps: { span: 24 },
            defaultValue: 0,
            component: 'Switch',
            required: true, //是否必填（默认必填）
            rules: [{ type: 'number' }], // 校验规则（可多条）
        },
        // 组件属性
        _props_: {
            disabled: false,
            checkedValue: 1, // 选中时的值
            unCheckedValue: 0, // 非选中时的值
            checkedChildren: undefined, // 选中时的内容
            unCheckedChildren: undefined, // 非选中时的内容
            size: 'default',
        },
        // 其他显示配置
        _other_: {
            tagIcon: 'switchIcon',
            isSvg: true,
            formItemId: 11,
            isShowList: true,
        },
    },
    {
        // 组件自定义配置
        _config_: {
            label: '滑动条',
            field: undefined,
            colProps: { span: 24 },
            defaultValue: 0,
            component: 'Slider',
            required: true, //是否必填（默认必填）
            rules: [{ type: 'number' }], // 校验规则（可多条）
        },
        // 组件属性
        _props_: {
            disabled: false,
            min: 0,
            max: 100,
            step: 1,
            reverse: false,
            range: false,
            size: 'default',
        },
        // 其他显示配置
        _other_: {
            tagIcon: 'sliderIcon',
            isSvg: true,
            formItemId: 12,
            isShowList: true,
        },
    },
    {
        // 组件自定义配置
        _config_: {
            label: '评分',
            field: undefined,
            colProps: { span: 24 },
            defaultValue: 0,
            component: 'Rate',
            required: true, //是否必填（默认必填）
            rules: [{ type: 'number' }], // 校验规则（可多条）
        },
        // 组件属性
        _props_: {
            disabled: false,
            count: 5,
            allowClear: true,
            allowHalf: false,
            character: undefined,
        },
        // 其他显示配置
        _other_: {
            tagIcon: StarOutlined,
            formItemId: 13,
            isShowList: true,
        },
    },
    {
        // 组件自定义配置
        _config_: {
            label: '时间选择',
            field: undefined,
            colProps: { span: 24 },
            defaultValue: undefined,
            component: 'TimePicker',
            required: true, //是否必填（默认必填）
            rules: [{ type: 'string' }], // 校验规则（可多条）
        },
        // 组件属性
        _props_: {
            placeholder: '请选择时间',
            disabled: false,
            allowClear: true,
            size: 'default',
            use12Hours: false,
            format: 'HH:mm:ss',
            valueFormat: 'HH:mm:ss',
            style: { width: '100%' },
        },
        // 其他显示配置
        _other_: {
            tagIcon: ClockCircleOutlined,
            formItemId: 14,
            format: 'HH:mm:ss',
            isShowList: true,
        },
    },
    {
        // 组件自定义配置
        _config_: {
            label: '日期选择',
            field: undefined,
            colProps: { span: 24 },
            defaultValue: undefined,
            component: 'DatePicker',
            required: true, //是否必填（默认必填）
            rules: [{ type: 'string' }], // 校验规则（可多条）
        },
        // 组件属性
        _props_: {
            placeholder: '请选择',
            disabled: false,
            allowClear: true,
            showTime: false,
            size: 'default',
            format: 'YYYY-MM-DD',
            valueFormat: 'YYYY-MM-DD',
            style: { width: '100%' },
        },
        // 其他显示配置
        _other_: {
            tagIcon: 'dateIcon',
            isSvg: true,
            formItemId: 15,
            format: 'YYYY-MM-DD',
            isShowList: true,
        },
    },
    {
        // 组件自定义配置
        _config_: {
            label: '月份选择',
            field: undefined,
            colProps: { span: 24 },
            defaultValue: undefined,
            component: 'MonthPicker',
            required: true, //是否必填（默认必填）
            rules: [{ type: 'string' }], // 校验规则（可多条）
        },
        // 组件属性
        _props_: {
            placeholder: '请选择',
            disabled: false,
            allowClear: true,
            size: 'default',
            format: 'YYYY-MM',
            valueFormat: 'YYYY-MM',
            style: { width: '100%' },
        },
        // 其他显示配置
        _other_: {
            tagIcon: 'monthIcon',
            isSvg: true,
            formItemId: 16,
            isShowList: true,
        },
    },
    {
        // 组件自定义配置
        _config_: {
            label: '日期范围',
            field: undefined,
            colProps: { span: 24 },
            defaultValue: [],
            component: 'RangePicker',
            required: true, //是否必填（默认必填）
            rules: [{ type: 'array' }], // 校验规则（可多条）
        },
        // 组件属性
        _props_: {
            size: 'default',
            disabled: false,
            allowClear: true,
            showTime: true,
            placeholder: ['开始时间', '结束时间'],
            format: 'YYYY-MM-DD HH:mm:ss',
            valueFormat: 'YYYY-MM-DD HH:mm:ss',
            style: { width: '100%' },
        },
        // 其他显示配置
        _other_: {
            tagIcon: FieldTimeOutlined,
            formItemId: 17,
            format: 'YYYY-MM-DD HH:mm:ss',
            isShowList: true,
        },
    },
    {
        // 组件自定义配置
        _config_: {
            label: '图片上传',
            field: undefined,
            colProps: { span: 24 },
            defaultValue: [],
            component: 'UploadImg',
            required: true, //是否必填（默认必填）
            rules: [{ type: 'array', trigger: 'blur' }], // 校验规则（可多条）
        },
        // 组件属性
        _props_: {
            size: 'default',
            maxCount: 1, // 最大上传数量
        },
        // 其他显示配置
        _other_: {
            tagIcon: CloudUploadOutlined,
            formItemId: 18,
            isShowList: true,
        },
    },
    {
        // 组件自定义配置
        _config_: {
            label: '附件上传',
            field: undefined,
            colProps: { span: 24 },
            defaultValue: [],
            component: 'UploadFile',
            required: true, //是否必填（默认必填）
            rules: [{ type: 'array', trigger: 'blur' }], // 校验规则（可多条）
        },
        // 组件属性
        _props_: {
            size: 'default',
            getType: 'api',
            maxCount: 1, // 最大上传数量
            accType: '/customForm',
            params: {},
            btnText: '上传附件', // 按钮名称
            delButton: true, // 是否显示删除按钮
            isClick: false, // 是否允许点击文件名称
            limitSize: 0, // 限制上传文件大小
        },
        // 其他显示配置
        _other_: {
            tagIcon: CloudUploadOutlined,
            formItemId: 19,
            isShowList: false,
        },
    },
];